<template>
    <el-dialog
        title="查看客户历史信审记录"
        :visible.sync="dialogVisible"
        width="50%"
        append-to-body
        >
        <div>
            <el-table
                v-loading="loading"
                :data="dataList"
                :span-method="arraySpanMethod"
                :header-cell-style="{ background: '#FAFAFA', color: '#000000' }" border>
                <template slot="empty">
                    <el-empty :image-size="50" description="客户暂无信审信息"></el-empty>
                </template>

                <el-table-column label="序号" type="index" align="center" prop="ruleName" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="申请编号" align="center" prop="applicationNo" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="提交时间" align="center" prop="submitTime" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="审核时间" align="center" prop="auditTime" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="撤单时间" align="center" prop="invalidTime" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="客户名称" align="center" prop="customerName" min-width="120px" show-overflow-tooltip></el-table-column>
                <el-table-column label="客户类型" align="center" prop="customerType" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.customer_type" :value="row.customerType"/>
                    </template>
                </el-table-column>
                <el-table-column label="客户标签" align="center" prop="needCreditReview" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.customer_label" :value="row.customerSource"/>
                    </template>
                </el-table-column>
                <el-table-column label="客户等级" align="center" prop="needCreditReview" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.customer_level" :value="row.customerLevel"/>
                    </template>
                </el-table-column>
                <el-table-column label="客户属性" align="center" prop="clientProperty" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.customer_property" :value="row.clientProperty"/>
                    </template>
                </el-table-column>
                <el-table-column label="是否是老客户" align="center" prop="areYouALoyalCustomer" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.business_yes_no" :value="row.areYouALoyalCustomer"/>
                    </template>
                </el-table-column>
                <el-table-column label="线索来源" align="center" prop="clueClassification" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.clues_source" :value="row.clueClassification"/>
                    </template>
                </el-table-column>
                <el-table-column label="产品方案" align="center" prop="planName" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="业务类型" align="center" prop="businessType" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.business_type" :value="row.businessType"/>
                    </template>
                </el-table-column>
                <el-table-column label="租赁用途" align="center" prop="clientProperty" min-width="120px" show-overflow-tooltip>
                    <template v-slot="{row}">
                        <dict-tag :options="dict.type.rental_purpose" :value="row.leasePurpose"/>
                    </template>
                </el-table-column>
                <el-table-column label="租期" align="center" prop="leaseTerm" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="租金支付方式" align="center" prop="rentPaymentMethod" min-width="120px" show-overflow-tooltip/>

                <template>
                    <el-table-column label="申请类型" align="center" prop="applicationType" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="车辆厂商" align="center" prop="vehicleManufacturers" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="车辆类型" align="center" prop="vehicleModel" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="车辆款型" align="center" prop="vehicleStyle" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="车辆能源类型" align="center" prop="vehicleEnergyType" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="登记性质" align="center" prop="registrationNature" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="里程限制(公里)" align="center" prop="mileageLimit" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="上牌城市" align="center" prop="registeredCity" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="申请台数" align="center" prop="numberOfApplications" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="保证金" align="center" prop="margin" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="每期租金" align="center" prop="monthlyRent" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="首期租金, 比例" align="center" prop="firstInstallmentRent" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                            <template v-if="row.firstInstallmentRentalRatio">
                              {{ row.firstInstallmentRent }} 、{{ row.firstInstallmentRentalRatio }}%
                            </template>
                            <template v-else>
                              -- 、--
                            </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="残值, 比例" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip>
                        <template v-slot="{row}">
                          <template v-if="row.residualValueRatio">
                            {{ row.residualValue }} 、 {{ row.residualValueRatio }}%
                          </template>
                          <template v-else>
                            -- 、--
                          </template>
                        </template>
                    </el-table-column>
                    <el-table-column label="新车采购单价" align="center" prop="purchasePrice" min-width="120px" show-overflow-tooltip/>
                    <el-table-column label="旧车当前估值" align="center" prop="currentValuation" min-width="120px" show-overflow-tooltip/>
                </template>


                <el-table-column label="申请总台数" align="center" prop="totalApplicationNumber" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="通过总台数" align="center" prop="totalPassNumber" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="拒绝总台数" align="center" prop="totalRejectNumber" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="撤单总台数" align="center" prop="totalCancelNumber" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="新车采购总额" align="center" prop="newCarProcurementAmount" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="旧车当前估值总额" align="center" prop="oldCarValuationAmount" min-width="140px" show-overflow-tooltip/>
                <el-table-column label="通过台数到期时间" align="center" prop="creditReviewDeadline" min-width="140px" show-overflow-tooltip/>
                <el-table-column label="信审结果" align="center" prop="ruleName" min-width="120px" show-overflow-tooltip>
<!--                    <template v-slot="{row}">-->
<!--                        <dict-tag v-if="row.creditReviewResult" :options="dict.type.credit_review_status" :value="row.creditReviewResult"/>-->
<!--                        <span v-else>&#45;&#45;</span>-->
<!--                    </template>-->

                  <template v-slot="{row}">
                    <dict-tag :options="dict.type.credit_review_status" :value="row.creditReviewStatus"/>
                  </template>
                </el-table-column>
                <el-table-column label="额度申请" align="center" prop="orderNo" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="提交人" align="center" prop="submitter" min-width="120px" show-overflow-tooltip/>
                <el-table-column label="审核人" align="center" prop="auditPerson" min-width="120px" show-overflow-tooltip/>


            </el-table>
<!--            <pagination :total="total" :page.sync="queryParams.pageNum" :limit.sync="queryParams.pageSize"-->
<!--                        @pagination="getList"/>-->

        </div>
    </el-dialog>

</template>

<script>
import * as letterReviewApi from "@/api/letterReview/letterReview";
export default {
    dicts: [
        'business_type',
        'customer_type',
        'customer_level',
        'rental_purpose',
        'customer_label',
        'customer_property',
        'business_yes_no',
        'credit_review_status',
        'clues_source'
    ],
    data() {
        return {
            dialogVisible:false,
            // 遮罩层
            loading: false,
            // 查询参数
            queryParams: {
                pageNum: 1,
                pageSize: 100,
                tabType: 0,
                customerNo:null,
                id:this.$route.query.id
            },

            total: 0,
            dataList: [],
        };
    },

    methods: {
        show(customerNo){
            this.dialogVisible = true
            this.queryParams.customerNo = customerNo;
            this.getList()
        },
        /** 查看历史信审记录 */
        getList() {
            this.loading = true;
            letterReviewApi.creditReviewlistDetails(this.queryParams).then(res => {
                this.dataList = res.rows;
                this.total = res.total;
                this.setrowspans(this.dataList)
            }).finally(() => {
                this.loading = false
            })
        },

        // 合并相同编号行
        arraySpanMethod({row, column, rowIndex, columnIndex}) {
            //根据下标合并
            if (columnIndex < 16 || columnIndex > 30) {
                return {
                    rowspan: row.rowspan,
                    colspan: row.rowspan > 0 ? 1 : 0
                }
            }
        },
        // 计算每行数据需要合并的行rowspan，在表格数据更新后进行调用
        setrowspans(list) {
            list.forEach(v => {
                v.rowspan = 1
            })
            // 双层循环
            for (let i = 0; i < list.length; i++) {
                /**
                 * 内层循环，上面已经给所有的行都加了v.rowspan = 1
                 * 如果当前行的purchaseNo和下一行的purchaseNo相等
                 * 就把当前v.rowspan + 1
                 * 下一行的v.rowspan - 1
                 */
                for (let j = i + 1; j < list.length; j++) {
                    // 此处可根据相同字段进行合并，此处是根据的purchaseNo，实际情况根据业务需要修改
                    if (list[i].applicationNo === list[j].applicationNo) {
                        list[i].rowspan++
                        list[j].rowspan--
                    } else {
                        break
                    }
                }
                // 这里跳过已经合并的行数据，从下一次需要合并的行开始
                i = i + list[i].rowspan - 1
            }
        }

    }
};
</script>
